<template>
  <div
  @click="verify"
  ref="dom"
  :style="disableView"
  class="verify-container"
  >
    <div :class="{ 'has-count-down': countDownStart }">
      <span id="sliderDefaultDom" v-if="!$slots.default"></span>
      <slot><!-- slot内容 --></slot>
    </div>
    <div v-if="countDownStart" class="count-down">{{count}}s</div>
  </div>
</template>

<script>
import $ from 'jquery'
import { SliderVerification } from './slider'
export default {
  name: 'SliderVerify',
  props: {
    // 弹窗位置 top
    top: {
      type: Boolean,
      default: false
    },
    topLeft: {
      type: Boolean,
      default: false
    },
    topRight: {
      type: Boolean,
      default: false
    },
    // 弹窗位置 bottom
    bottom: {
      type: Boolean,
      default: false
    },
    bottomLeft: {
      type: Boolean,
      default: false
    },
    bottomRight: {
      type: Boolean,
      default: false
    },
    // 倒计时（开启时，滑块弹窗校验完成后扔是禁用状态，间隔60s后恢复）
    countDown: {
      type: Boolean,
      default: false
    },
    // 禁用状态（父级可直接控制本组件禁用状态）
    disabledStatus: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      modelStatus: false,
      countDownStart: false,
      timer: null,
      count: 60
    }
  },
  computed: {
    isTooltip () {
      return this.top ||
      this.top ||
      this.topLeft ||
      this.topRight ||
      this.bottom ||
      this.bottomLeft ||
      this.bottomRight
    },
    style () {
      const dom = $(this.$refs.dom)
      let style = {}
      if (dom.length) {
        const { top, left } = dom.offset()
        const height = dom.height()
        const width = dom.width()
        const [diff, oWdith, oHeight] = [10, 310, 306]
        const defaultStatus = 'initial'
        if (this.top) {
          style = {
            top: `${top - oHeight - diff}px`,
            bottom: defaultStatus,
            right: defaultStatus,
            left: `${left - oWdith / 2 + width / 2}px`
          }
        } else if (this.topLeft) {
          style = {
            top: `${top - oHeight - diff}px`,
            bottom: defaultStatus,
            right: defaultStatus,
            left: `${left}px`
          }
        } else if (this.topRight) {
          style = {
            top: `${top - oHeight - diff}px`,
            bottom: defaultStatus,
            right: defaultStatus,
            left: `${left - oWdith + width}px`
          }
        } else if (this.bottom) {
          style = {
            top: `${top + height + diff}px`,
            bottom: defaultStatus,
            right: defaultStatus,
            left: `${left - oWdith / 2 + width / 2}px`
          }
        } else if (this.bottomLeft) {
          style = {
            top: `${top + height + diff}px`,
            bottom: defaultStatus,
            right: defaultStatus,
            left: `${left}px`
          }
        } else if (this.bottomRight) {
          style = {
            top: `${top + height + diff}px`,
            bottom: defaultStatus,
            right: defaultStatus,
            left: `${left - oWdith + width}px`
          }
        }
      }
      return style
    },
    // 当校验弹窗开始 或者 有且存在倒计时进行时
    disableView () {
      const s = this.disabledStatus ? this.disabledStatus : (this.modelStatus || this.countDownStart)
      return {
        color: !s ? '#367EE8' : '#bbbbbb',
        pointerEvents: !s ? 'initial' : 'none'
      }
    }
  },
  methods: {
    verify (e) {
      this.modelStatus = true
      const sliderObj = new SliderVerification(null, {
        successCallback: cert => {
          this.modelStatus = false
          if (this.countDown) {
            this.countDownStart = true
            clearInterval(this.timer)
            this.timer = setInterval(() => {
              if (this.count) {
                this.count--
              } else {
                clearInterval(this.timer)
                this.timer = null
                this.countDownStart = false
              }
            }, 1000)
          }
          this.$emit('modelStatus', this.modelStatus)
          this.$emit('result', cert)
        },
        errorCallback: function (error) {
          alert(error)
        },
        imgErrorCallback: function () {
          alert('获取滑块验证图片失败，请点击刷新按钮重新获取图片！')
        },
        style: this.style,
        clickMaskClose: false
      })
      this.$emit('modelStatus', this.modelStatus)
      sliderObj.showLayer()
      e.stopPropagation()
    },
    async init () {
      if (this.$slots.default) {
        return
      }
      const that = this
      // eslint-disable-next-line no-new
      new SliderVerification('#sliderDefaultDom', {
        successCallback: function (cert) {
          that.$emit('result', cert)
        },
        errorCallback: function (error) {
          alert(error)
        },
        imgErrorCallback: function () {
          alert('获取滑块验证图片失败，请点击刷新按钮重新获取图片！')
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.verify-container {
  display: inline-block;
  cursor: pointer;
}
.has-count-down {
  height: 0;
  overflow: hidden;
}
.count-down {
  text-align: center;
}
</style>
<style lang="css">
.Trigger_slider {
  width: 310px;
  height: 306px;
  box-shadow: 0px 0px 6px 0px #495060;
  border-radius: 4px;
  border: solid 1px #dddee1;
  position: absolute;
  top: -140px;
  left: 70px;
  background: white;
  display: none;
  z-index: 9999;
}

body .Trigger_slider {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

body .Trigger_slider .validate_oGuide {
  background: none;
}

.validate_main {
  position: relative;
  width: 280px;
  height: 160px;
  background-color: #e8e8e8;
  margin: 16px;
}
.validate_block {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0;
}
.validate_time {
  width: 100%;
  background: #1fca74;
  /*#F44336*/
  height: 24px;
  position: absolute;
  color: #ffffff;
  bottom: 0;
  opacity: 0.8;
  line-height: 24px;
  display: none;
  font-size: 12px;
}

.validate_oGuide {
  position: absolute;
  height: 25px;
  width: 16px;
  background: url(./icon.png) no-repeat scroll 0 -25px;
  left: -12px;
  top: 50%;
}
.validate_load {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  text-align: center;
  line-height: 160px;
  background: #ffffff;
  border: 1px solid #dddee1;
  font-size: 14px;
  color: #495060;
}
.validate_box {
  /*验证盒子*/
  height: 36px;
  line-height: 36px;
  width: 280px;
  background: url(./icon.png) no-repeat scroll -780px 0;
  position: relative;
  text-align: center;
  margin: 10px;
  margin-top: 22px;
}
.validate_progress {
  height: 36px;
  line-height: 36px;
  background: url(./icon.png) no-repeat scroll -500px 0;
  position: absolute;
  top: 0;
}
.validate_button {
  width: 60px;
  height: 60px;
  background: url(./icon.png) no-repeat scroll -440px 0;
  position: absolute;
  left: 0;
  top: -12px;
  z-index: 1;
  cursor: pointer;
}

.validate_button:hover {
  background-position: -320px 0;
}
.validate_button_false {
  background-position: -260px 0;
}
.validate_box .validate_button_drag {
  background-position: -200px 0;
}
.validate_prompt {
  font-size: 14px;
  margin-left: 50px;
}
.validate_underline {
  height: 1px;
  width: 280px;
  margin: 10px;
  margin-top: 22px;
  background-color: #dddee1;
  border: 0;
}
.validate_refresh {
  position: relative;
  margin: 10px;
  width: 280px;
  height: 20px;
  line-height: 20px;
  text-align: left;
}

.validate_refresh_box {
  position: relative;
  height: 20px;
  width: 60px;
  cursor: pointer;
}
.validate_refresh_box:hover .validate_icon {
  background-position: -40px 0;
}
.validate_refresh_box:hover {
  color: #0079cc;
}
.validate_icon {
  height: 20px;
  width: 20px;
  background: url(./icon.png) no-repeat scroll -120px 0;
  position: absolute;
  top: 0;
}
.validate_refresh_content {
  position: absolute;
  font-size: 14px;
  left: 25px;
}
.validate_content {
  position: absolute;
  right: 0;
  top: 2px;
  font-size: 12px;
  color: #dddee1;
  line-height: 20px;
}

.Trigger_slider_button {
  border: 1px solid #dddee1;
  border-radius: 4px;
}
.Trigger_slider_button:hover {
  border: 1px solid #0079cc;
}

.Trigger_slider_icon {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -10px;
  height: 20px;
  width: 20px;
  background: url(./icon.png) no-repeat scroll -20px 0;
  cursor: pointer;
}
.Trigger_slider_logo {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -10px;
  height: 20px;
  width: 20px;
  background: url(./icon.png) no-repeat scroll;
}
</style>
